<template>
  <div class="app-container">
    <!-- <div class="right-detail"> -->
    <div class="cbox">
      <el-form ref="formA" :model="formA" :inline="true" :rules="rules" size="mini">
        <el-form-item prop="cmpName" label="供应商：">
          <el-input placeholder="请输入供应商名称" v-model="formA.cmpName" clearable></el-input>
        </el-form-item>
        <!-- <el-form-item prop="rvCmeaning" label="保证金类型：">
             <el-select  clearable v-model="form.rvCmeaning">
                <el-option
                  v-for=" item in listDataC"
                  :key="item.rvLowValue"
                  :value="item.rvLowValue"
                  :label="item.rvCmeaning"
                ></el-option>
              </el-select>
            </el-form-item> -->
        <el-form-item prop="bondStatus" label="保证金状态：">
          <el-select clearable v-model="form.bondStatus">
            <el-option v-for="item in options" :key="item.statusValue" :label="item.label" :value="item.statusValue"></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" size="mini" @click="search">查 询</el-button>
        <!-- </el-form-item> -->
      </el-form>
    </div>
    <div class="btn">
      <el-row class="btn-area">
        <buttonName @clickEvent="clickEventDom"></buttonName>
        <!-- <el-button plain size="mini" type="primary" v-if="isAuth('add')" @click="addBond">缴费</el-button>
              <el-button plain size="mini" type="primary" v-if="isAuth('edit')" @click="editBond">编辑</el-button>
              <el-button plain size="mini" type="primary" v-if="isAuth('del')" @click="delBond">删除</el-button>
              <el-button plain size="mini" type="primary" v-if="isAuth('returnbond')" @click="returnbond">退回</el-button> -->
      </el-row>
    </div>
    <div class="table" ref="topType">
      <div class="inner" ref="inner">
        <el-table
          :data="DetailedData"
          border
          :height="maxHeight"
          :header-cell-style="{ textAlign: 'center' }"
          highlight-current-row
          @row-dblclick="rowdbClickA"
          @row-click="rowClick"
        >
          <el-table-column size="mini" :index="indexMethod" align="center" type="index" show-overflow-tooltip width="100" label="序号"></el-table-column>
          <el-table-column align="center" prop="fltName" label="供应商名称" show-overflow-tooltip sortable width="120"></el-table-column>
          <el-table-column align="center" prop="bidCode" label="标的编号" show-overflow-tooltip sortable width="200"></el-table-column>
          <el-table-column align="center" prop="bidName" label="标的名称" show-overflow-tooltip sortable width="250"></el-table-column>
          <el-table-column align="center" prop="bond" label="保证金金额(元)" show-overflow-tooltip sortable width="150"></el-table-column>
          <el-table-column align="center" prop="created" label="缴纳时间" show-overflow-tooltip sortable width="200"></el-table-column>
          <el-table-column align="center" prop="rvCmeaning" label="保证金类型" show-overflow-tooltip sortable width="150"></el-table-column>
          <el-table-column align="center" prop="bondStatus" label="保证金状态" show-overflow-tooltip sortable width="120">
            <template slot-scope="scope">
              <span>{{ bondStatusList[scope.row.bondStatus] }} </span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="remarks" label="备注" show-overflow-tooltip sortable></el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 分页 -->
    <el-pagination
      class="pagination"
      small
      background
      ref="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="Pagination.currentPage"
      :page-sizes="Pagination.pageSizeList"
      :page-size="Pagination.pageSize"
      :layout="Pagination.layout"
      :total="Pagination.total"
    ></el-pagination>

    <!-- 弹出框 新增 编辑 -->
    <el-dialog v-el-drag-dialog width="35%" :title="addText" :visible.sync="addShowA" v-show="addShowA" @close="dialogClose" :close-on-click-modal="false">
      <el-form label-width="12rem" :model="xzData" ref="xzData" style="width:90%" size="mini" :rules="addRules">
        <el-row :gutter="20">
          <el-form-item prop="feeValue" label="标书：" size="mini">
            <el-popover placement="bottom" width="500" v-model="box" trigger="click">
              <el-table
                :data="tableDataE"
                border
                :height="tableHeight"
                :header-cell-style="{ textAlign: 'center' }"
                :cell-style="{ textAlign: 'center' }"
                @row-click="getCurrentRowA"
                highlight-current-row
              >
                <el-table-column type="index" align="center" label="序号" width="50"></el-table-column>
                <el-table-column prop="bidCode" label="标的编号" show-overflow-tooltip></el-table-column>
                <el-table-column prop="bidName" label="标的名称" show-overflow-tooltip></el-table-column>
              </el-table>
              <div class="el-input el-select el-input--mini el-input--suffix" slot="reference">
                <el-input :disabled="disabled" v-model="xzData.feeValue" @keyup.delete.native="fuzzyQuery" @input="fuzzyQuery" clearable size="mini"></el-input>
                <span class="el-input__suffix">
                  <span class="el-input__suffix-inner">
                    <i class="el-select__caret el-input__icon " :class="isShow ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
                  </span>
                </span>
              </div>
            </el-popover>
          </el-form-item>
        </el-row>
        <el-row :gutter="20">
          <!-- <el-form-item prop="fltId" label="供应商：" size="mini">
                            <el-popover placement="bottom" width="500" v-model="box1"  trigger="click">
                                <el-table :data="listDataA" border :height="tableHeight" :header-cell-style="{ textAlign: 'center' }"
                                  :cell-style="{ textAlign: 'center' }" @row-click="getCurrentRowA" highlight-current-row>
                                  <el-table-column type="index" align="center" label="序号" width="50"></el-table-column>
                                  <el-table-column prop="bidCode" label="标的编号" show-overflow-tooltip ></el-table-column>
                                  <el-table-column prop="bidName" label="供应商" show-overflow-tooltip ></el-table-column>
                                </el-table>
                                <div class="el-input el-select el-input--mini el-input--suffix" slot="reference">
                                <el-input :disabled='disabled' v-model="xzData.fltId" @keyup.delete.native="fuzzyQuery"  @input="fuzzyQuery"  clearable  size="mini"></el-input>
                                  <span class="el-input__suffix">
                                    <span class="el-input__suffix-inner">
                                      <i class="el-select__caret el-input__icon " :class="isShow?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
                                    </span>
                                  </span>
                                </div>
                            </el-popover>
                        </el-form-item> -->
          <el-form-item prop="fltId" label="供应商：">
            <el-select clearable v-model="xzData.fltId" filterable :disabled="disabled" placeholder="请选择">
              <el-option v-for="item in listDataA" :key="item.uuid" :value="item.uuid" :label="item.fltName"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row :gutter="20">
          <el-form-item prop="bondMode" label="保证金类型：">
            <el-select clearable v-model="xzData.bondMode" :disabled="disabled" placeholder="请选择">
              <el-option v-for="item in listDataC" :key="item.rvLowValue" :value="item.rvLowValue" :label="item.rvCmeaning" ></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row :gutter="20">
          <el-form-item prop="bond" label="保证金(元)：">
            <el-input v-model="xzData.bond" maxlength="8" clearable :disabled="disabled" placeholder="请输入保证金，最多两位小数"></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="20">
          <el-form-item prop="remarks" label="备注：">
            <el-input v-model="xzData.remarks" maxlength="100" show-word-limit type="textarea" clearable :disabled="disabled"></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="close">关闭</el-button>
        <el-button size="mini" type="primary" v-if="see" @click="saveEditor('xzData')">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog
      v-el-drag-dialog
      width="40%"
      :close-on-press-escape="false"
      :title="refuseDialog.title"
      :visible.sync="refuseDialog.show"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      @open="refuseDialogOpen"
      @close="refuseDialogClose"
    >
      <div class="allBorderDiv">
        <div class="formDiv">
          <el-form size="mini" inline ref="refuseDialogFromDialog" v-model="refuseDialog">
            <el-form-item label="标的编号：" prop="bidName">
              <el-input
                :fetch-suggestions="queryBidName"
                clearable
                placeholder="请输入标的编号"
                maxlength="50"
                v-model="refuseDialog.bidName"
                style="width: 200px"
              ></el-input>
            </el-form-item>
            <el-button type="primary" @click="searhBidList">查询</el-button>
          </el-form>
        </div>
        <div>
          <el-table
            ref="refuseDialogTableRef"
            :data="refuseDialog.bidList"
            border
            size="mini"
            @row-click="refuseDialogTableRowClick"
            @selection-change="refuseDialogTableSelectChange"
          >
            <el-table-column align="center" label="序号" type="index"></el-table-column>
            <el-table-column align="center" type="selection"></el-table-column>
            <el-table-column align="center" label="标的编号" prop="bidCode"></el-table-column>
            <el-table-column align="center" label="标的名称" prop="bidName"></el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            small
            background
            @size-change="handleSizeChangeRefuse"
            @current-change="handleCurrentChangeRefuse"
            :current-page="refuseDialog.index"
            :page-sizes="[10, 20, 30]"
            :page-size="refuseDialog.pageSize"
            :layout="'sizes, prev, pager, next, jumper, total'"
            :total="refuseDialog.total"
          ></el-pagination>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="refuseDialog.show = false">取 消</el-button>
        <el-button type="primary" @click="doRefuseDocument">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  addSysBond,
  bondTypeBidding,
  companyListByStatus,
  delSysBond,
  editSysBond,
  noRefuseDocuments,
  queryBiddingList,
  queryBondList,
  returnSysbond,
  selectByBidId
} from '@/request/api'
import isAuth from '@/mixins/buttonAuth'
import resizeMixin from '@/mixins/resize'
import paginationMixin from '@/mixins/pagination'
import buttonName from '@/components/buttonName/button-name.vue'
import { doRefuseDocuments } from '@/request/bidding/bond'

export default {
  name: 'router.bond',
  mixins: [resizeMixin, paginationMixin, isAuth],
  data() {
    return {
      refuseDialog: {
        show: false,
        title: '',
        bidName: '',
        bidList: [],
        index: 1,
        pageSize: 10,
        total: 0,
        selected: []
      },
      editDisable: false, // 编辑时禁用
      arr: [],
      input_value: '',
      currentData: {},
      feeValue: '',
      feeId: '',
      // typeValue:'',
      typeId: '',
      tableDataE: [],
      listDatac: [],
      tableHeight: 300,
      form: {
        bond: '',
        status: '',
        cmpName: '',
        created: '',
        remarks: '',
        rvCmeaning: '',
        bondStatus: ''
      },
      formA: {
        cmpName: '',
        rvCmeaning: '',
        bondStatus: ''
      },
      item: {
        item: true,
        itemA: false
      },
      boxtype: [],
      box: false,
      bondStatusList: {
        N: '待缴纳',
        Y: '已缴纳',
        T: '已退回',
        PT: '待退回'
      },
      isShow: false,
      maxHeight: -1,
      disabled: false,
      disabledA: false,
      listData: [],
      listDataA: [],
      tableData: [],
      options: [
        {
          statusValue: 'Y',
          label: '已缴纳'
        },
        {
          statusValue: 'N',
          label: '待缴纳'
        },
        {
          statusValue: 'T',
          label: '已退回'
        },
        {
          statusValue: 'PT',
          label: '待退回'
        }
      ],
      statusValue: '',
      listDataC: [],
      diong: 'E',
      addText: '',
      addShowA: false, // 新增 编辑
      see: true, //保存按钮
      DetailedData: [], //主列表的数据
      xzData: {}, // 传给新增 编辑弹出框的数据
      PageIndexs: '',
      PageSizes: '',
      itemData: [], //当前行数据
      shiList: [], // 下拉框
      //表单验证 新增 编辑
      addRules: {
        feeValue: [{ required: true, message: '请选择标书信息', trigger: 'blur,change' }],
        bondMode: [{ required: true, message: '请选择供应商', trigger: 'change,blur' }],
        fltId: [{ required: true, message: '请选择供应商', trigger: 'change,blur' }],
        bond: [
          { required: true, message: '请填写金额', trigger: 'change,blur' },
          {
            pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: '请输入正确的金额',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  components: {
    buttonName
  },
  created() {
    this.resize = () => {
      this.maxHeight = this.$refs.inner.offsetHeight
    }
  },
  mounted() {
    this.refreshList()
    this.CompanyInfosByType()
    this.BiddingList()
    this.BondInfosByType()
  },
  methods: {
    // 生成表格序号的方法
    indexMethod(index) {
      return 1 + index + (Number(this.Pagination.currentPage) - 1) * Number(this.Pagination.pageSize)
    },
    // 获取缴费当前行数据
    getCurrentRowA(row) {
      this.xzData.feeValue = row.bidName
      this.xzData.bidId = row.bidId
      console.log(row)
      if (row.bidAppointIds !== null) {
        this.listDataA = this.arr.filter(item => row.bidAppointIds.split(',').includes(String(item.uuid)))
      } else {
        this.listDataA = this.arr
      }
      this.box = false
    },
    // 切换大写
    uppercase(key) {
      this.xzData[key] = this.xzData[key].toUpperCase()
    },
    //标书
    // bidList(data,obj){
    //   this.bidCode = data.bidCode
    //   this.bidName = data.bidName
    //   this.box = obj
    // },
    //查询
    search() {
      this.$refs.formA.validate(valid => {
        if (valid) {
          this.refreshList()
        }
      })
    },
    getList(currentPage, pageSize, updateTotal) {
      queryBondList({
        fltName: this.formA.cmpName,
        rvCmeaning: this.form.rvCmeaning,
        bondStatus: this.form.bondStatus,
        PageIndex: currentPage.toString(),
        PageSize: pageSize.toString()
      }).then(response => {
        this.DetailedData = response.data
        // console.log(response)
        updateTotal(Number(response.total))
        this.itemData = ''
        this.currentData = ''
      })
    },
    //标书下拉框
    BiddingList() {
      queryBiddingList({ bidAuditstatus: 'Y', bidBiddingstatus: 'Y', bidInternalStatus: 'N' }).then(res => {
        this.tableDataE = res.data
        this.listDatac = res.data
      })
    },
    //供应商下拉框
    CompanyInfosByType() {
      companyListByStatus({}).then(res => {
        // console.log(res)
        this.arr = res.data
        // console.log(this.listDataA)
      })
    },
    //保证金下拉框
    BondInfosByType() {
      bondTypeBidding().then(res => {
        this.listDataC = res.data
      })
    },
    //新增
    addBond() {
      this.addText = '缴费'
      this.diong = ''
      this.addShowA = true
      this.see = true
      this.disabled = false
      this.disabledA = false
      this.listDataA = this.arr
      this.xzData = {
        bond: '',
        cmpName: '',
        bondStatus: 'Y',
        remarks: '',
        bidId: '',
        bondMode: '',
        feeValue: '',
        // typeValue:'',
        fltId: ''
      }
    },
    //编辑
    editBond() {
      if (Object.keys(this.currentData).length) {
        this.addText = '编辑'
        this.diong = 'E'
        this.addShowA = true
        this.see = true
        this.disabled = false
        // this.editDisable = this.currentData.bondMode === this.bondMode.JJB
        this.disabledA = true
        this.xzData = JSON.parse(JSON.stringify(this.currentData))
        this.xzData.feeValue = this.currentData.bidName
      } else {
        this.$alert('请选择需要编辑的保证金', '提示', {
          confirmButtonText: '确定'
        })
        return false
      }
    },
    //删除
    delBond() {
      if (Object.keys(this.itemData).length) {
        this.$confirm('您确认要删除此保证金吗?', '提示', {
          closeOnClickModal: false
        }).then(() => {
          // if (this.itemData.bondStatus !== 'T') {
          //   this.$message.error({
          //     showClose: false,
          //     message: '该保证金未退回，无法删除'
          //   })
          //   return
          // }
          delSysBond({ bondId: this.itemData.bondId }).then(res => {
            if (res.success !== '1') {
              this.$message({
                type: 'success',
                message: '删除失败'
              })
              return
            } else {
              this.$message({
                type: 'success',
                message: '删除成功'
              })
            }
            this.refreshList()
            this.close()
          })
        })
      } else {
        this.$alert('请选择需要删除的保证金', '提示', {
          confirmButtonText: '确定'
        })
        return false
        // eslint-disable-next-line no-unreachable
        this.refreshList()
        this.close()
      }
    },

    //退回
    returnbond() {
      console.log(this.currentData)
      if (this.currentData.bondStatus === 'T') {
        this.$alert('此保证金已退回', '提示', {
          confirmButtonText: '确定'
        })
        return false
      } else if (Object.keys(this.itemData).length) {
        this.$confirm('您确认要退回此保证金吗?', '提示', {
          closeOnClickModal: false
        }).then(() => {
          selectByBidId({ bidId: this.itemData.bidId }).then(res => {
            console.log(res.data)
            if (res.data == '0') {
              this.$alert('竞价未结束，保证金无法退回', '提示', {
                confirmButtonText: '确定'
              })
              return false
            } else {
              returnSysbond({ bondId: this.itemData.bondId }).then(res => {
                if (res.success !== '1') {
                  this.$message({
                    type: 'success',
                    message: '退回失败'
                  })
                  return
                } else {
                  this.$message({
                    type: 'success',
                    message: '退回成功'
                  })
                  // this.refreshList()
                  this.close()
                }
              })
            }
          })
        })
      } else {
        this.$alert('请选择需要退回的保证金', '提示', {
          confirmButtonText: '确定'
        })
        return false
      }
    },

    //模糊查询标书内容
    fuzzyQuery() {
      var _this = this
      _this.box = true
      let newListData = []
      _this.listDatac.forEach(item => {
        if (item.bidName.search(_this.xzData.feeValue) != -1) {
          if (_this.xzData.feeValue.length > 0) {
            newListData.push(item)
            _this.tableDataE = newListData
          } else {
            _this.tableDataE = []
            newListData = []
            _this.tableDataE = _this.listDatac
          }
        }
      })
    },
    //双击查看
    rowdbClickA(row) {
      this.addText = '查看'
      this.addShowA = true
      this.see = false
      this.xzData = row
      this.xzData.feeValue = this.currentData.bidName
      this.xzData.bidId = this.currentData.bidId
      // this.feeValue = this.currentData.bidName
      this.xzData.fltId = this.currentData.fltId
      this.disabled = true
      this.disabledA = true
    },
    //新增 编辑  点击保存
    saveEditor(xzData) {
      this.$refs[xzData].validate(valid => {
        if (valid) {
          if (this.diong === 'E') {
            // console.log(this.xzData,8888)
            editSysBond(this.xzData).then(res => {
              if (res.success !== '1') {
                this.$message({
                  type: 'success',
                  message: '编辑失败'
                })
              } else {
                this.$message({
                  type: 'success',
                  message: '编辑成功'
                })
                this.close()
              }
            })
          } else {
            addSysBond(this.xzData).then(res => {
              if (res.success !== '1') {
                this.$message({
                  type: 'success',
                  message: '添加失败'
                })
              } else {
                this.$message({
                  type: 'success',
                  message: '添加成功'
                })
                this.close()
                this.refreshList()
                this.$refs[xzData].resetFields()
              }
            })
          }
        } else {
          return false
        }
      })
    },
    // 关闭弹出框
    close() {
      this.addShowA = false
      this.itemData = ''
      this.currentData = ''
      this.refreshList()
    },
    dialogClose() {
      this.editDisable = false
      this.$refs['xzData'].resetFields()
      this.itemData = ''
      this.currentData = ''
      this.refreshList()
    },
    //当前行数据

    rowClick(row) {
      this.itemData = row
      this.currentData = row
      // console.log(row.bidId)
    },
    //调取父组件方法
    clickEventDom(item) {
      console.log(item)
      if (item.mdlCode === 'add') {
        this.addBond()
      } else if (item.mdlCode === 'edit') {
        this.editBond()
      } else if (item.mdlCode === 'del') {
        this.delBond()
      } else if (item.mdlCode === 'returnbond') {
        this.returnbond()
      } else if (item.mdlCode === 'returnbondAll') {
        this.returnbondAll()
      }
    },
    // 批量退回保证金
    returnbondAll() {
      this.refuseDialog.show = true
      this.refuseDialog.title = '批量退回'
    },
    queryBidName() {},
    searhBidList() {
      this.getRefuseDocuments()
    },
    handleSizeChangeRefuse(size) {
      this.refuseDialog.pageSize = size
      this.getRefuseDocuments()
    },
    handleCurrentChangeRefuse(index) {
      this.refuseDialog.index = index
      this.getRefuseDocuments()
    },
    refuseDialogOpen() {
      this.getRefuseDocuments()
    },
    getRefuseDocuments() {
      noRefuseDocuments({
        name: this.refuseDialog.bidName,
        PageIndex: this.refuseDialog.index,
        PageSize: this.refuseDialog.pageSize
      }).then(res => {
        this.refuseDialog.bidList = res.data
        this.refuseDialog.total = res.total
      })
    },
    refreshDialogPage() {
      this.refuseDialog.index = 1
      this.refuseDialog.total = 0
      this.refuseDialog.pageSize = 10
    },
    refuseDialogClose() {
      this.refuseDialog.bidName = ''
      this.$refs['refuseDialogFromDialog'].resetFields()
      this.refreshDialogPage()
      this.refuseDialog.bidList = []
      this.refreshList()
    },
    refuseDialogTableSelectChange(val) {
      this.refuseDialog.selected = val
    },
    refuseDialogTableRowClick(val) {
      this.$refs['refuseDialogTableRef'].toggleRowSelection(val)
    },
    doRefuseDocument() {
      if (!this.refuseDialog.selected.length) {
        this.$message.error({
          showClose: false,
          message: '至少选择一项'
        })
        return
      }
      doRefuseDocuments({
        ids: this.refuseDialog.selected.map(value => value.bidId)
      }).then(() => {
        this.$message.success({
          showClose: true,
          message: '退回成功'
        })
        this.refuseDialog.show = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-select {
  width: 100%;
}

.app-container {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;

  .table {
    flex: 1;
    position: relative;
    overflow: hidden;

    .inner {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .el-pagination {
      height: 4rem;
      flex: 0 0 auto;
      margin: 1rem 0;
    }
  }
}

::v-deep .el-textarea__inner {
  height: 100px;
}

.allBorderDiv {
  border: 1px solid #409eff;
  border-radius: 10px;
  padding: 10px;
}
</style>
